<!DOCTYPE html>
<html lang="en" style="height: 100%" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>客户管理</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/morris/morris-0.4.3.min.css">
    <link rel="stylesheet" href="/js/plugins/gritter/jquery.gritter.css">
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">
    <style>
        /*模态框导致页面偏移问题*/
        .modal-open{
            overflow-y: scroll;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
            margin-right: 20px;
        }

        .toast-center-center {
            left: 50%;
            top: 35%;
            transform: translate(-50%,-50%);
        }

        .pagination-detail {
            margin-left: 20px;
        }

        .float-e-margins .btn {
            margin-bottom: 0px;
        }

        .modal-title {
            margin-left: 230px;
        }

        #customerTable tr {
            text-align: center;
            font-size: 15px;
            font-family: 微软雅黑;
            background-color: seashell;
        }

        #customerTable tr:hover {
            background-color: #E6E1DC;
        }

        #currency input:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="wrapper wrapper-content animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>客户管理列表</h5>
                            </div>
                            <div class="ibox-content" style="padding: 0">
                                <div id="fixed-table-toolbar" style="padding:0;margin: 0">
                                    <div class="form-group" style="float: right;width: 100%;margin-top: 10px">
                                        <form role="form" class="form-inline">
                                            <div class="form-group" style="margin-top: 5px;margin-left: 20px">
                                                <text style="margin-left: 10px"><font size="3">客户号: </font></text>
                                                <input type="text" class="form-control" id="customerNo" placeholder="请输入客户号">
                                                <text style="margin-left: 10px"><font size="3">客户分类: </font></text>
                                                <select class="form-control" id="searchCustomerGroup" name="customerGroup">
                                                    <option value="" selecte></option>
                                                    <option value="C">C</option>
                                                    <option value="R">R</option>
                                                    <option value="S">S</option>
                                                </select>
                                                <button type="button" class="btn btn-primary" id="search" style="margin-left: 15px">
                                                    <span class="glyphicon glyphicon-search"></span>
                                                </button>
                                                <button type="button" class="btn btn-primary" id="addBtn" style="margin-left: 10px">
                                                    <span class="glyphicon glyphicon-plus"></span>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <table id="customerTable" class="table table-hover table-condensed"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--修改客户信息时的模态框-->
    <div class="modal fade" id="updateModel" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="updateModalLabel" style="font-family: 微软雅黑">修改客户信息</h3>
                </div>
                <form id="formData" class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label col-lg-3">客户号:</label>
                            <div class="col-lg-8">
                                <input type="text" id="customerNumber" name="customerNumber" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-3">客户名称:</label>
                            <div class="col-lg-8">
                                <input type="text" id="customerName" name="customerName" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-3">客户分组:</label>
                            <div class="col-lg-8">
                                <select class="form-control" id="customerGroup" name="customerGroup" >
                                    <option value="C" selected>C</option>
                                    <option value="R">R</option>
                                    <option value="S">S</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" type="button" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                        <button class="btn btn-success" type="button" id="updateBtn">
                            <span class="glyphicon glyphicon-ok"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteModel" aria-labelledby="deleteModelLabel" aria-hidden="true" style="margin-top: 200px">
        <div class="modal-dialog" style="width: 500px">
            <div class="modal-content">
                <div class="modal-header" style="text-align: center">
                    <h3 id="deleteModalLabel" style="color: red;font-family: 微软雅黑">删除客户信息</h3>
                </div>
                <div class="col-lg-8">
                    <input type="hidden" id="deleteCustomerNumber" name="customerNumber">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">
                        <span>取消</span>
                    </button>
                    <button class="btn btn-success" type="button" id="deleteBtn">
                        <span>确认</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!--新增客户信息时的模态框-->
    <div class="modal fade" id="addModel" aria-labelledby="addModelLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="addModalLabel" style="font-family: 微软雅黑">新增客户信息</h3>
                </div>
                <form id="addFormData" class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label col-lg-3">客户名称:</label>
                            <div class="col-lg-8">
                                <input type="text" id="addCustomerName" name="customerName" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-3">客户分组:</label>
                            <div class="col-lg-8">
                                <select class="form-control" id="addCustomerGroup" name="customerGroup" >
                                    <option value="C" selected>C:企业客户</option>
                                    <option value="R">R:零售商</option>
                                    <option value="S">S:小小企业</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="currency">
                            <label class="control-label col-lg-3">交易货币:</label>
                            <div class="col-lg-8">
                            <input type="checkbox" name="options" th:each="currenyList:${currenyMap}" th:value="${currenyList.value}" th:text="${currenyList.key}" style="margin-left: 8px;margin-right: 8px;"><br>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" type="button" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                        <button class="btn btn-success" type="button" id="addCustomer">
                            <span class="glyphicon glyphicon-ok"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

<script src="/js/jQuery.min.js"></script>
<script src="/js/plugins/toastr/toastr.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-editable.js"></script>
<script src="/bootstrap/js/bootstrap-table.min.js"></script>
<script src="/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/hplus.js?v=2.2.0"></script>
<script src="/js/plugins/pace/pace.min.js"></script>
<script src="js/index.js"></script>
<script src="/js/customer.js"></script>

</body>
</html>
